<template>
  <el-dialog :visible.sync="dialogFormVisible" @close="close">
    <div slot="title" class="dialog-title">
      {{ title }}指标到校分配表
      <el-button style="margin-left: 50px" icon="el-icon-download" type="primary" @click="handleAdd">一键补充数据</el-button>
    </div>
    <el-table border ref="tableSort" :data="list" :height="height">
      <el-table-column label="学校名称" prop="highSchoolName" show-overflow-tooltip min-width="20" align="center" />
      <el-table-column label="指标人数" prop="indicatorsNum" show-overflow-tooltip min-width="20" align="center" />
      <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip min-width="20" align="center" />
      <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip min-width="20" align="center" />
      <el-table-column label="操作" show-overflow-tooltip width="100" align="center">
        <template #default="{ row }">
          <el-button type="warning" @click="handleEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="form.highSchoolName" append-to-body width="500px" :visible.sync="showedit" @close="closedialog">
      <el-form ref="form" label-width="auto" :model="form" :rules="rules">
        <el-form-item label="指标人数" prop="indicatorsNum">
          <el-input-number v-model="form.indicatorsNum" :min="0" :max="100" ref="inputNumber"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closedialog">取 消</el-button>
        <el-button @click="changeIndicator" type="success">保 存</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import { SelSchoolSindicatornum, AddSchoolSindicatornum, EditSchoolSindicatornum } from '@/api/colorfulIcon'
  export default {
    name: 'UserManagementEdit',
    data() {
      return {
        rules: {
          indicatorsNum: [{ type: 'number', required: true, trigger: 'blur', message: '请输入指标人数' }],
        },
        form: {},
        showedit: false,
        middleSchoolId: 0,
        list: [],
        title: '',
        dialogFormVisible: false,
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight() - 25
      },
    },
    created() {},
    methods: {
      async changeIndicator() {
        const { code } = await EditSchoolSindicatornum(this.form)
        if (code == 1000) {
          this.fetchData(this.middleSchoolId)
        }
        this.closedialog()
      },
      handleEdit(row) {
        this.form = row
        this.$nextTick(() => {
          this.$refs.inputNumber.$el.querySelector('input').focus()
        })
        this.showedit = true
      },
      closedialog() {
        this.showedit = false
      },
      async handleAdd() {
        const { code } = await AddSchoolSindicatornum({ middleSchoolId: this.middleSchoolId })
        if (code == 1000) {
          this.fetchData(this.middleSchoolId)
        }
      },
      showEdit(row) {
        this.title = row.schoolName
        this.middleSchoolId = row.id
        this.dialogFormVisible = true
        this.fetchData(this.middleSchoolId)
      },
      async fetchData(id) {
        const { data } = await SelSchoolSindicatornum({ middleSchoolId: id })
        this.list = data
      },
      close() {
        this.dialogFormVisible = false
      },
      save() {},
    },
  }
</script>
